import React,{Component} from 'react';
import {connect} from  'react-redux'
import {bindActionCreators} from 'redux';
import {deleteFromSelected} from "../actions/selected-actions";

class selectedItems extends Component{
    constructor(props){
        super(props);
    }

    render(){
        const selected = Object.values(this.props.selected).map((value, index)=>{
            const name = Object.keys(this.props.selected)[index];
            return value.map((val,ind)=>{
                return <div key={parseInt(''+index+ind)}
                            onClick={(e)=>this.props.deleteItem(name,val)}>
                    {name}:{Object.values(val)}
                    </div>;
            })
        });

        return(
           <div>
               {selected}
           </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        selected:state.selected
    }
};

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        deleteItem: deleteFromSelected
    },dispatch)
};

export default connect(mapStateToProps,mapDispatchToProps)(selectedItems);


